<template>
    <div class="foot-nav-containner">
        <ul class="bottom-nav">
          <router-link tag="li" :to='{name:"index"}' class="bottom-nav__li bottom-nav__li--home">
            <i class="fa fa-home "></i><br/>
            <p class="text">首页</p>
          </router-link>
          <router-link tag="li" :to='{name:"admin"}' class="bottom-nav__li icon-shoppingcart bottom-nav__li--car">
            <i class="fa fa-calendar"></i>
            <p class="text"><mt-badge type="error" v-if="untouched">{{untouched}}</mt-badge>管理员</p>
          </router-link>
          <router-link tag="li" :to='{name:"mine"}' class="bottom-nav__li bottom-nav__li--vip">
              <i class="fa fa-user"></i>
              <p class="text">我的</p>
            </router-link>
        </ul>
     </div>
</template>

<script>
  import fetch from '../utils/fetch'
export default {
  name: 'foot-nav',
  data () {
    return {
      untouched: ''
    }
  },
  created(){
    this.handleGetUntouched()
  },
  computed:{
  },
  methods: {
    handleGetUntouched() {
      fetch('/api/project/booked/untouched').then(response =>{
        if(response.data.success){
          this.untouched = response.data.response.num
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../base/css/base.scss';
    .foot-nav-containner{
        position: fixed;
        bottom:0;
        width: 100%;
        z-index: 1001;
        border-top: 0.014rem solid #f4f4f4;
        background: #f7f7f7;
        opacity: 0.8;
        .bottom-nav{
            display: flex;
            .bottom-nav__li{
                flex:1;
                align-items:center;
                justify-content:center;
                text-align: center;
                @include fz(8px);
                position: relative;
                padding: 9px 0 0;
                color: #bbbb;
              .text {
                position: relative;
                @include fz(5px);
                text-align: center;
              }
              i.fa {
                  color: #444;
                  font-size: 0.6rem;
              }

            }
        }
    }
    .router-link-active{
      color:#4DA9EC!important;
    }






</style>
